<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <!-- 文章卡片 -->
  <div
    class="cdc-article-panel user-article-item"
    th:fragment="article_card(article)"
  >
    <a
      class="cdc-article-panel__link"
      rel="noreferrer"
      th:href="${'/article/detail/' + article.articleId}"
    ></a>
    <div class="cdc-article-panel__inner">
      <div class="user-article-item-content cdc-article-panel__main">
        <div class="user-article-item-title-wrap cdc-article-panel__title">
          <img
            class="article-card-top-img"
            th:if="${article.toppingStat == 1 && #httpServletRequest != null && #httpServletRequest.requestURI == '/'}"
            src="https://cdn.cnbj1.fds.api.mi-img.com/aife/technology-platform-fe/preview/dist/static/commandImg.99adc700.svg"
          />
          <span
            th:text="${article.title}"
            class="user-article-item-title"
          ></span>
          <span th:if="${article.status != 1}">
            <span th:text="${article.status == 0 ? '(草稿)' : '(审核中)'}" class="user-article-item-tag"></span>
          </span>
        </div>
        <div class="user-article-item-value-wrap cdc-article-panel__media">
          <div
            class="user-article-item-value-text cdc-article-panel__desc"
            th:text="${article.summary}"
          >
            文章简介
          </div>
        </div>
        <div class="user-article-item-footer cdc-article-panel__infos">
          <div class="user-article-item-footer-left cdc-article-panel__user">
            <span
              class="article-title-other-name cdc-avatar large cdc-article-panel__user-avatar circle"
            >
              <a
                class="cdc-avatar__inner"
                th:style="'background-image: url(' + ${article.authorAvatar} + ');'"
                th:href="${'/user/' + article.author}"
              ></a>
            </span>
            <a
              class="article-title-wrap cdc-article-panel__user-name"
              th:text="${article.authorName}"
              th:href="${'/user/' + article.author}"
            ></a>
          </div>
          <div
            class="cdc-article-panel__date"
            th:text="${T(com.github.paicoding.forum.core.util.DateUtil).time2day(article.createTime)}"
          ></div>

          <div class="cdc-icon__list cdc-article-panel__operate d-flex">
            <div class="article-show-wrap">
              <!--  阅读计数  -->
              <a th:href="'/article/detail/' + ${article.articleId}">
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span
                  class="cdc-icon__number"
                  th:text="${article.count.readCount}"
                ></span>
              </a>
            </div>
            <div class="article-show-wrap">
              <!--  评论计数  -->
              <a
                th:href="'/article/detail/' + ${article.articleId} + '#commentList'"
              >
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span
                  class="cdc-icon__number"
                  th:text="${article.count.commentCount}"
                >
                  12
                </span>
              </a>
            </div>
            <div class="article-show-wrap">
              <!--  点赞计数  -->
              <!--  fixme 后续优化为可以直接在列表页进行点赞/取消  -->
              <a th:href="'/article/detail/' + ${article.articleId}">
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span
                  class="cdc-icon__number"
                  th:text="${article.count.praiseCount}"
                >
                  12
                </span>
              </a>
            </div>
          </div>

          <div
            class="user-article-item-tag-wrap cdc-tag-links cdc-article-panel__tags"
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="cdc-tag-links__icon"
            >
              <mask
                id="mask0_1118_14146"
                style="mask-type: alpha"
                maskUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="16"
                height="16"
              >
                <rect width="16" height="16" fill="#D9D9D9" />
              </mask>
              <g mask="url(#mask0_1118_14146)">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.7262 8.18068L12.5948 3.6552L8.06934 2.52383L2.45929 8.13388L8.11614 13.7907L13.7262 8.18068ZM13.4194 2.83058L14.8337 8.48743L8.11614 15.2049L1.04508 8.13388L7.76259 1.41636L13.4194 2.83058Z"
                  fill="#495770"
                />
                <circle
                  cx="10.5911"
                  cy="5.659"
                  r="1"
                  transform="rotate(45 10.5911 5.659)"
                  fill="#495770"
                />
              </g>
            </svg>

            <div class="cdc-tag-links__items">
              <a
                th:href="'/article/tag/' + ${tag.tag}"
                th:text="${tag.tag}"
                rel="article-tag"
                th:each="tag : ${article.tags}"
                class="user-article-item-tag cdc-tag-links__item"
              ></a>
            </div>
          </div>
        </div>
      </div>
      <div
        class="user-article-img cdc-article-panel__object"
        th:if="${!#strings.isEmpty(article.cover)}"
      >
        <span
          class="cdc-article-panel__object-thumbnail"
          th:style="'background-image: url(' + ${article.cover} + ');'"
        ></span>
      </div>
      <script type="text/javascript" th:inline="javascript">
        // 有图的时候加一点 margin
        $(
          ".cdc-article-panel__main:has(+ .cdc-article-panel__object) .cdc-article-panel__infos"
        ).css("margin-top", "20px")
      </script>
    </div>
  </div>
</html>
